1. in view

                   <div class="col-sm-4" >
        
                            <label>Status<span style="color:red;">*</span></label>            
                            <select class="form-control" formControlName="status_id" (change)="onchangeSelect($event,'status_id')">
                              <option  selected>Select </option>
                              <option *ngFor="let row of formOptionData['status_id']" [value]="row.id">{row.name}</option>
                            </select>

                            <div *ngIf="showError==true && 
                            statusForm.controls['status_id'].invalid &&  
                                (statusForm.controls['status_id'].dirty ||
                                statusForm.controls['status_id'].touched)" class="alert alert-danger errormessage " style="position:absolute;top:45px;">
                                <div [hidden]="!statusForm.controls['status_id'].errors.required">
                                        Please select a status
                                </div>                             
                            </div>
                      
                    
                  </div>


                  <div class="col-sm-4" *ngIf="showAgentPanel==true">
        
                            <label>Agent<span style="color:red;">*</span></label>            
                            <select class="form-control" formControlName="agent_id">
                              <option  selected>Select </option>
                              <option *ngFor="let row of formOptionData['agent_id']" [value]="row.id">{row.name}</option>
                            </select>

                            <div *ngIf="showError==true && 
                            statusForm.controls['agent_id'].invalid &&  
                                (statusForm.controls['agent_id'].dirty ||
                                statusForm.controls['agent_id'].touched)" class="alert alert-danger errormessage " style="position:absolute;top:45px;">
                                <div [hidden]="!statusForm.controls['agent_id'].errors.required">
                                        Please select a agent
                                </div>                             
                            </div>
                      
                    
                  </div>

              

2. in component

                ...
                 .. 
                this.statusForm = this.fb.group({
                     
                    'status_id': ['', Validators.required], 
                    'agent_id' :[''],
                    
                  
                });

                .... 
                ..... 


                onchangeSelect(event, fieldName){
         
                    if(fieldName=='status_id'){
                        
                            let stage= this.formOptionData['status_id'].find( fella => fella.id == event.target.value)
                            console.log(stage);
                            this.showAgentPanel=false;
                            this.statusForm.controls['agent_id'].clearValidators(); 
                            if(stage.identifier=='sent_to_agent'){
                                this.showAgentPanel=true;
                                this.statusForm.controls['agent_id'].setValidators([Validators.required]); 
                            }
                            this.statusForm.get('agent_id').updateValueAndValidity(); 
                        
                    }

                }





                loadOptionData(url, type, value){
                    this.commonService.options(url)
                      .subscribe(response => 
                      {       
                          //console.log(response.length);
                          this.formOptionData[type]=response; 
                          
                          if(response.length==1){
                            this.mainForm.get(type).patchValue(response[0].id);
                          }
                      
                        
                          document.getElementById("overlay").style.display = "none"
                      
                      });
                }


                    </div>
                    </li>



           
          </ul>
        </div>



</div>       



      </div> 
    </section>     





    

  </main><!-- End #main -->

  

  <div id="preloader"></div>
  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="https://blog.manvia.in/public/assets/vendor/aos/aos.js"></script>
  <script src="https://blog.manvia.in/public/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="https://blog.manvia.in/public/assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="https://blog.manvia.in/public/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="https://blog.manvia.in/public/assets/vendor/php-email-form/validate.js"></script>
  <script src="https://blog.manvia.in/public/assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="https://blog.manvia.in/public/assets/vendor/waypoints/noframework.waypoints.js"></script>

  <!-- Template Main JS File -->
  <script src="https://blog.manvia.in/public/assets/js/main.js"></script>

</body>

</html>